<template>
    <div id="account" class="bg-account">
        <div class="account-info con-wrap">
            <h4 class="account-t4">我的余额</h4>
            <div class="account-money"><span>￥</span>{{ userInfo.money }}</div>
            <div class="flex-nowrap">
                <a href="#/account/transfer" class="btn-2">转账</a>
                <a href="#/account/recharge" class="btn-2 btn-2-main">充值</a>
            </div>
        </div>
        <van-tabs v-model:active="activeName" background="transparent" @click-tab="onClickTab">
            <van-tab title="充值记录" name="rechargeList">
                <van-pull-refresh v-model="refreshing" @refresh="onRefresh('rechargelist')">
                    <van-list v-model:loading="loading" :finished="finished" :offset="100" finished-text="没有更多了" @load="loadData('rechargelist')" class="con-wrap">
                        <div class="recharge-item" v-for="item in rechargeList" :key="item.id" @click="toSuccess(item.id)">
                            <div class="flex-nowrap">
                                <img v-if="item.pay_type == 1" src="/statics/home/images/pay-wx.png" alt="微信支付" class="recharge-icon" />
                                <img v-if="item.pay_type == 2" src="/statics/home/images/pay-alipay.png" alt="支付宝" class="recharge-icon" />
                                <h3 class="r-i-t3">{{ item.pay_type_text }}</h3>
                                <p class="color-main">+{{ item.money }}</p>
                            </div>
                            <div class="flex-nowrap">
                                <p class="recharge-time">{{ item.created_at }}</p>
                                <span class="color_6 fz12">{{ item.pay_status_text }}</span>
                            </div>
                        </div>
                    </van-list>
                </van-pull-refresh>
            </van-tab>
            <van-tab title="消费记录" name="consumeList">
                <van-pull-refresh v-model="refreshing" @refresh="onRefresh('consumeList')">
                    <van-list v-model:loading="loading" :finished="finished" :offset="100" finished-text="没有更多了" @load="loadData('consumeList')" class="con-wrap">
                        <div class="recharge-item" v-for="item in transferList" :key="item.id" @click="toUrl(item.order_sn,item.type)">
                            <div class="flex-nowrap">
                                <h3 class="r-i-t3">{{ item.type_text }}</h3>
                                <p class="color-main">{{ item.type_symbol }}{{ item.money }}</p>
                            </div>
                            <p class="recharge-time">{{ item.created_at }}</p>
                        </div>
                    </van-list>
                </van-pull-refresh>
            </van-tab>
          </van-tabs>
    </div>
</template>


<script>
export default {
    name: 'Account',
    data() {
        return {
            activeName:'rechargeList',
            loading:false,
            finished:false,
            refreshing: false,
            pages:{
                page:0,
                size:10,
            },
            rechargeList:[],
            transferList:[],
            userInfo:{
                money:0
            },
        }
    },
    created() {
        this.$api.user.info({}).then(res => {
            this.userInfo = res.result
        }).finally(e => {});
        this.onRefresh('rechargelist');
    },
    methods: {
        // 上拉
        loadData(loadname) {
            let self = this;
            if (self.refreshing) {
                self.refreshing = false;
            }
            self.loading = true;
            self.finished = false
            if(loadname == 'rechargelist'){
                self.$api.recharge.list({page: self.pages.page,size: self.pages.size}).then(res => {
                    let data = self.pages.page == 1 ? [] : self.rechargeList;
                    for( var i = 0; i< res.result.length; i ++) {
                        data.push(res.result[i]);
                    }
                    self.rechargeList = data;
                    self.pages.page++;
                    self.loading = false;
                    if (res.result.length < 10) {
                        self.finished = true;
                    }
                }).finally(e =>{});
            }else{
                self.$api.account.list({page: self.pages.page,size: self.pages.size}).then(res => {
                    let data = self.pages.page == 1 ? [] : self.transferList;
                    for( var i = 0; i< res.result.length; i ++) {
                        data.push(res.result[i]);
                    }
                    self.transferList = data;
                    self.pages.page++;
                    self.loading = false;
                    if (res.result.length < 10) {
                        self.finished = true;
                    }
                }).finally(e =>{});
            }
        },
        // 下拉刷新
        onRefresh(loadname) {
            // 清空列表数据
            this.finished = false;
            this.loading = true;
            this.refreshing = true;
            this.pages.page = 1;
            this.loadData(loadname);
        },
        // 标签切换
        onClickTab(item){
            this.onRefresh(item.name);
        },
        toSuccess(id){
            this.$router.push('/account/recharge/success/' + id);
        },
        toUrl(order_sn,type){
            // console.log('toUrl',order_sn,type)
            // 只有转账可以跳转，其他到各自的系统下查看
            if (type == 2 || type == 6) {
                this.$router.push('/account/transfer/success/0?order_sn=' + order_sn);
            }
        }
    }
}
</script>
